<template>
    <div class="appointment-setting">
        <div class="setting">
            <div>
                一个月内，取消次数达到
                <!--                <el-input v-model="count" size="small" class="short" @blur="blurChange('count', 3)"></el-input>-->
                <el-input-number v-model="count" :min="1" :max="10000" size="small" :controls="false"
                                 class="short"></el-input-number>
                次，
                <!--                <el-input v-model="day" size="small" class="short" @blur="blurChange('day', 30)" type="number"></el-input>-->
                <el-input-number v-model="day" :min="1" :max="36500" size="small" :controls="false"
                                 class="short"></el-input-number>
                天后才能预约挂号
            </div>
            <div class="mt10">
                遇节假日不排班
                <el-switch class="ml10"
                           v-model="openOff"
                           active-color="#13ce66"
                           inactive-color="#DCDFE6"
                ></el-switch>
                <!--                <div class="tips">节假日包括法定节假日和自定义节假日</div>-->
            </div>
            <div class="mt10">
                设置节假日
                <el-link type="primary" :underline="false" class="ml10 edit" @click="showEdit">{{dayOffOut[0] ? '修改' :
                    '请选择'}}
                </el-link>
                <div class="chosen-month-list mt10" v-if="dayOffOut[0]">
                    <div class="title">已设置</div>
                    <div v-for="(item,index) in dayOffOut" :key="index" class="clearfix">
                        <span class="month">{{item.month}}月：</span>
                        <div class="days"><span v-for="(list,i) in item.days" :key="list">{{list}}号<i
                            v-if="i<item.days.length-1">、</i></span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buttons">
            <el-button type="primary" class="submit" @click="submit">保存</el-button>
        </div>
        <dialog-msk :show.sync="showEditDayOff" title="自定义节假日" :width="'740px'" @save="saveDayOff" :center="true"
                    :noEsc="false" :noModal="false" @cancel="closeDayOff">
            <div class="head">
                选择月份
                <el-date-picker
                    v-model="chosenMonth"
                    type="month" class="ml10"
                    :clearable="false"
                    :picker-options="{
                        disabledDate:disabledDate
                    }"
                    @change="datePickerChange"
                    placeholder="选择月">
                </el-date-picker>
            </div>
            <div class="week mt10">
                <div class="head clearfix">
                    <div>星期一</div>
                    <div>星期二</div>
                    <div>星期三</div>
                    <div>星期四</div>
                    <div>星期五</div>
                    <div>星期六</div>
                    <div>星期日</div>
                </div>
                <div class="cont clearfix">
                    <div v-for="(item,index) in weeks" :key="index"
                         :class="{disabled: !item.value, active: item.active}"
                         @click="setDayOff(item)">
                        {{item.value}}
                    </div>
                </div>
            </div>
            <div class="chosen-month-list mt10">
                <div v-for="(item,index) in dayOff" :key="index" class="clearfix">
                    <span class="month">{{item.month}}月：</span>
                    <div class="days"><span v-for="(list,i) in item.days" :key="list">{{list}}号<i
                        v-if="i<item.days.length-1">、</i></span></div>
                </div>
            </div>
        </dialog-msk>
    </div>
</template>

<script>
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            return {
                month: '',
                chosenMonth: '', // 已选择月份
                weeks: [], // 日历显示
                count: 3,
                day: 30,
                monthOptions: [
                    {
                        label: '一个月',
                        value: ''
                    }
                ],
                openOff: false, // 是否开启节假日不排班
                showEditDayOff: false, // 是否显示修改自定义节假日弹窗
                dayOff: [], // 弹窗内显示的自定义休息日
                dayOffOut: [] // 外面显示的自定义休息日
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.$http.get('/appointment/settings/getSettings').then(result => {
                    if (result.success) {
                        let data = result.data
                        this.count = data.expertsAppointmentBlackListCount
                        this.day = data.expertsAppointmentBlackListDays
                        this.dayOffOut = data.holidayConfig.months
                        this.openOff = !data.scheduleForHoliday
                    }
                })
            },
            blurChange(obj, num) {
                if (!this[obj]) this[obj] = num
            },
            submit() {
                this.$nextTick(() => {
                    this.$http.post('/appointment/settings/updateSettings', {
                        expertsAppointmentBlackListCount: this.count,
                        expertsAppointmentBlackListDays: this.day,
                        holidayConfig: {
                            months: this.dayOffOut
                        },
                        scheduleForHoliday: !this.openOff
                    }).then(result => {
                        if (result.success) {
                            this.$method.messageBox('alert', '设置修改成功')
                        }
                    })
                })
            },
            disabledDate(date) {
                let year = date.getFullYear()
                return year !== (new Date()).getFullYear()
            },
            getCalendar() {
                this.weeks = []
                let date = this.chosenMonth, // chosenMonth 默认为当前月第一天
                    getDay = date.getDay(), // 当前月第一天是星期几
                    last = new Date(date.getFullYear(), date.getMonth() + 1, 0), // 当前月最后一天
                    getLastDay = last.getDay(), // 当前最后一天是星期几
                    getLastDate = last.getDate(), // 当前最后一天是几号
                    firstWeek = 8 - getDay, weeks = []
                // getWeeks = 0 // 当前月有几周
                firstWeek = firstWeek > 7 ? 1 : firstWeek // 第一周有几天
                // getWeeks = Math.ceil((getLastDate - firstWeek) / 7) + 1
                if (firstWeek < 7) {
                    for (let i = 0; i < 7 - firstWeek; i++) {
                        weeks.push({
                            value: '',
                            active: false
                        })
                    }
                }
                for (let i = 0; i < getLastDate; i++) {
                    weeks.push({
                        value: i + 1,
                        active: false
                    })
                }
                if (getLastDay !== 0) {
                    for (let i = 0; i < 7 - getLastDay; i++) {
                        weeks.push({
                            value: '',
                            active: false
                        })
                    }
                }
                this.dayOff.map(e => {
                    if (e.month === date.getMonth() + 1) {
                        if (e.days.length > 0) {
                            weeks.forEach(item => {
                                if (e.days.indexOf(item.value) > -1) item.active = true
                            })
                        }
                    }
                })
                this.weeks = weeks
            },
            datePickerChange() {
                this.getCalendar()
            },
            setDayOff(day) {
                if (!day.value) return false
                day.active = !day.active
                let month = this.chosenMonth.getMonth()
                if (this.dayOff[0]) {
                    let monthExist = false
                    this.dayOff.forEach((e, i) => {
                        if (e.month === month + 1) {
                            monthExist = true
                            let num = e.days.indexOf(day.value)
                            if (!day.active && num > -1) {
                                e.days.splice(num, 1)
                                if (e.days.length < 1) {
                                    this.dayOff.splice(i, 1)
                                } else {
                                    e.days.sort()
                                }
                            } else if (day.active && num < 0) {
                                e.days.push(day.value)
                                e.days.sort()
                            }
                        }
                    })
                    if (!monthExist) {
                        this.dayOff.push({
                            month: month + 1,
                            days: [day.value]
                        })
                        this.dayOff.sort((a, b) => {
                            return a.month - b.month
                        })
                    }
                } else {
                    this.dayOff.push({
                        month: month + 1,
                        days: [day.value]
                    })
                }
            },
            showEdit() {
                let nowDate = new Date()
                this.chosenMonth = new Date(nowDate.getFullYear(), nowDate.getMonth(), 1)
                this.dayOff = JSON.parse(JSON.stringify(this.dayOffOut))
                this.getCalendar()
                this.showEditDayOff = true
            },
            saveDayOff() {
                this.dayOffOut = JSON.parse(JSON.stringify(this.dayOff))
                this.closeDayOff()
            },
            closeDayOff() {
                this.showEditDayOff = false
            }
        },
        components: {
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .appointment-setting {
        padding: 100px;

        /deep/ .setting {
            line-height: 32px;
            max-width: 80%;

            .el-input-number {
                display: inline-block;
                width: 120px;
                margin: 0 6px;

                &.short {
                    width: 60px;

                    input {
                        padding: 0 5px;
                        text-align: center;
                        /*width: 60px;*/
                    }
                }
            }

            .chosen-month-list {
                padding: 10px 15px;
                border: 1px solid #EFEFEF;
                border-radius: 2px;
                font-size: 14px;
                max-width: 600px;
            }

            .edit {
                vertical-align: top;
            }
        }

        .buttons {
            margin-top: 80px;
            /*padding-left: 185px;*/

            .el-button {
                width: 150px;
            }
        }

        .week {
            width: 700px;
            padding-top: 1px;
            padding-left: 1px;

            .head, .cont {
                > div {
                    border: 1px solid #ccc;
                    float: left;
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    margin-top: -1px;
                    margin-left: -1px;

                    &.disabled {
                        background-color: #f7f7f7;
                        cursor: not-allowed;
                    }

                    &.active {
                        background-color: #3489f2;
                        color: #fff;
                    }
                }
            }

            .head {
                > div {
                    background-color: #eee;
                }
            }

            .cont {
                > div {
                    cursor: pointer;
                }
            }
        }

        .chosen-month-list {

            > div {
                .month {
                    float: left;
                }

                .days {
                    margin-left: 45px;
                    color: #999;
                }
            }
        }

        .tips {
            font-size: 13px;
            color: #999;
        }
    }
</style>
